import React from 'react'

import styles from './index.module.css'
import Nav from '../../../components/nav'
import {withRouter, RouteComponentProps} from 'react-router-dom'
import {connect} from "react-redux";
import request from "../../../utils/request";
import {Toast} from "antd-mobile";
import {Dispatch} from "redux";

const Coupon: React.FC<{ item: coupon, onSelectClick: any }> = ({item, onSelectClick}) => {
    const {discount, name} = item;
    return (
        <div className={styles.coupon} onClick={() => {
            onSelectClick(item);
        }}>

            <div className={styles.type}>代金券</div>
            <h2 className={styles.money}>{discount}<b style={{fontSize: '18px', fontWeight: 400}}>元</b></h2>
            <div className={styles.describe}>
                <div style={{
                    fontSize: '16px',
                    fontWeight: 600,
                    marginBottom: '8px'
                }}>校园专享
                </div>
                <div style={{
                    fontSize: '16px',
                    fontWeight: 600,
                    marginBottom: '8px'
                }}>{name}
                </div>
                <div style={{
                    color: '#B0B0B0'
                }}>2019年06月04日-06月30日
                </div>
            </div>
            <div className={styles.use}>去使用</div>
        </div>
    );
};


interface Props extends RouteComponentProps {
    dispatch: Dispatch

}


interface coupon {
    id: number,
    name: string,
    discount: number,
}

interface States {
    couponList: coupon[]
}

class Index extends React.Component<Props, States> {


    state: States = {
        couponList: []
    };

    componentDidMount() {
        request('/coupons').then((result) => {
            const {couponList} = result.data;
            this.setState({couponList});

        }).catch(() => {
            Toast.fail('网络异常')
        })
    }

    onSelectClick = (item: coupon) => {
        const {dispatch, history} = this.props;
        dispatch({
            type: 'selectedCouponSave',
            payload: item
        });
        history.goBack();
    };


    cancel = () => {
        const {dispatch, history} = this.props;
        dispatch({
            type: 'selectedCouponSave',
            payload: null
        });
        history.goBack();
    };

    render() {
        const {history} = this.props;
        return (
            <div className={styles.container}>
                <Nav title={"优惠卷/抵用卷"} onLeftClick={() => {
                    history.goBack();
                }}/>
                {
                    this.state.couponList.map((item, inx) => {
                        return <Coupon item={item} onSelectClick={this.onSelectClick} key={inx}/>
                    })
                }
                <div className={styles.bottom}>
                    <button type={"button"} onClick={this.cancel}>取消
                    </button>
                </div>
            </div>
        );
    }
}

export default connect((state) => ({}), (dispatch: Dispatch) => ({
    dispatch
}))(withRouter(Index))
